<template>
    <div class="heater" ref="top">
      <div class="searchBox">
        <input type="text" placeholder="玩具" @focus="grabble">
      </div>
      <div class="nav">
        <section  ref="ref">
          <ul>
            <li v-for="(item, key) in navLive"
                :key = key
            >{{item}}</li>
          </ul>
        </section>
        <div class="dropdown" @click="AllCategories">
          <span class="Categories" ref="Categories"></span>
        </div>
      </div>
      <AllCategories v-show="CategoriesIsShow"></AllCategories>
    </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import AllCategories from './AllCategories/AllCategories'
    export default {
        name: "heater",
        data() {
          return{
            navLive:['精选','食品','母婴','家居','女装','生鲜','生活用品','箱包'],
            number:0,
            CategoriesIsShow:false
          }
        },
      methods:{
        grabble() {
          this.$router.push({path:'./search01'})
        },
        AllCategories(){
          this.number++;
          // this.$router.push({path:'/AllCategories/AllCategories'});
          if(this.number%2 !== 0){
            this.$refs.Categories.style.transform = 'rotate(45deg)';
            this.$refs.Categories.style.borderColor = '#a1a1a1';
            this.$refs.top.style.background = '#fff';
            this.CategoriesIsShow = true
          }else {
            this.$refs.Categories.style.transform = 'rotate(-135deg)';
            this.$refs.top.style.background = 'none';
            this.CategoriesIsShow = false
          }
        }
      },
      mounted(){
        let el = this.$refs.ref;
        let heater = this.$refs.top;
        new BScroll(el, {
          click:true,
          scrollX:true
        });
        // 接收center传过来的值
        this.$bus.$on('heater',(pos) =>{
          if(pos.y<0){
            heater.style.backgroundColor = 'rgba(255,255,255,0.3)'
          }
          if(pos.y>=0) {
            heater.style.backgroundColor = 'rgba(255,255,255,0)'
          }
        });
      },
      components:{
        AllCategories
      }
  }
</script>

<style scoped lang="scss">
.heater{
  color: #333;
  height: 275px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
 .searchBox{
   height: 145px;
   box-sizing: border-box;
   padding: 30px 37px 14px;
   input{
     display: block;
     width: 100%;
     line-height: 105px;
     font-size: 40px;
     border-radius: 50px;
     background:url("../../assets/search.png") no-repeat 45% center #f2f2f2;
     background-size: 50px 50px;
     text-align: center;
     outline: none;
     text-indent: 1rem;
     border: none;
   }
 }
  .nav{
    height: 130px;
    display: flex;
    section{
      flex: 1;
      height: 130px;
      position: relative;
      overflow: hidden;
      color: #fffff3;
      //box-shadow:-10px 0 10px 0 #999 inset;
    }
    ul{
      position: absolute;
      width: 210px*8;
      height: 130px;
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
      line-height: 130px;
      li{
        width: 210px;
        font-size:50px;
        text-align: center;
      }
    }
    .dropdown{
      width: 132px;
      line-height: 120px;
      text-align: center;
      .Categories{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-left: 3px solid #fff;
        border-top: 3px solid #fff;
        transform: rotate(-135deg);
      }
    }
  }
}
</style>
